<!--
 * @Author: GKN
 * @Date: 2024-02-01 10:34:01
 * @LastEditTime: 2024-02-01 10:41:17
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\animatedly\list_other.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<!--
 * @Author: GKN
 * @Date: 2023-09-01 10:42:12
 * @LastEditTime: 2024-01-30 16:48:51
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\animatedly\list.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="main mainPadding p-t p-b" style="background: #fff;">
    <div class="max-w">
    <listView :breadcrumb_list="breadcrumb_list" :page ="page" @currentChange="currentChange">
        <template v-slot:content>
            <div class="MarT35">
                <el-row :gutter="20" style="width: 100%;min-height:500px;" >
                    <div v-if="list.length==0||!list" class="withFull flex flex-j-c">
                        <el-empty :image-size="150" description="暂无数据"  />
                    </div>
                    <el-col v-for="item in list" :key="item" :span="24">
                        <div class="item cursor-p" @click="detail(item)">
                            <el-row :gutter="20">
                                <el-col :span="8" v-if="item.thumb">
                                    <div class="img shadow-1">
                                        <img :src="proxy.$api.prefix_img+item.thumb" alt="" class="img_cover">
                                    </div>
                                </el-col>
                                <el-col :span="!item.thumb?24:16">
                                    <div class="flex itemR">
                                        <div>
                                            <div class="title omit-2" style="height: 76px;">{{ item.name }}</div>
                                            <div class="desc MarT omit-4" style="height: 86px;">{{ item.blurb }}</div>
                                        </div>
                                        <div class="flex itemR-b MarT12"> 
                                            <div class="look"><img src="@/assets/img/anim/i7.png" alt="" style="margin-right:10px;">{{ item.look||'0'}}</div>
                                            <div class="time">{{ item.startTm }}</div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <el-divider></el-divider>
                    </el-col>
                </el-row>
                <!-- <div class="pager" v-if="isPage">
                    <myPage @nextbtn="nextbtn" @prevbtn="prevbtn" />
                </div>  -->
            </div>
        </template>
    </listView>
    </div>
  </div>
</template>

<script setup>
import listView from '../components/list.vue';
import { ref,reactive, onMounted,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import CryptoJS from 'crypto-js';
import { useRoute, useRouter } from "vue-router";
const Router = useRouter();
    // 导航参数
    const query = proxy.$comJs.decrypt(Router.currentRoute.value.query.ob,'query')
    // 面包屑
    const breadcrumb_list = [{name:query.first_title,},{name:query.title}]
    const page = ref({
        total:10
    })
    const currentChange = (e)=>{
        // ElMessage('第'+e+'条')
    }
    const list = ref([])
    const pageinfo = ref({
        nextTag:0,
        prevTag:0
    })
    const isPage = ref(true)
    const getList =()=>{
        proxy.$http.request(proxy.$api.news_other+'?pageSize=100&sty='+query.ty,'get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    res.data.data.list.map((item)=>{
                        list.value.push(item)
                    })
                }
                pageinfo.value={
                    nextTag:res.data.data.nextTag,
                    prevTag:res.data.data.prevTag
                }
                if(res.data.data.nextTag < 0||res.data.data.nextTag==0){
                    isPage.value = false
                }
            }
        })
        proxy.$comJs.getNewList(5,query.id,{...pageinfo.value},'',(data)=>{
            data.list.map((item)=>{
                list.value.push(item)
            })
            
        })
    }
    getList()
    const nextbtn=()=>{
        if(pageinfo.value.nextTag!=-1||pageinfo.value.nextTag!=0){
            getList()
        }else{
            proxy.$comJs.msg('error','没有更多',2)
        }
    }
    const prevbtn=()=>{
        getList()
    }
    const detail = (item)=>{
        const routeUrl = Router.resolve({
            path:'/animatedly/info',
            query:{
                ob:proxy.$comJs.encry({
                    title:query.title,
                    id:item.newsId,
                    path:'/animatedly/list',
                    first_title:query.first_title,
                })
            }
        });
        window.open(routeUrl.href, "_blank");
    }
</script>

<style lang='less' scoped>
.item{
    height: 224px;
    margin-bottom:30px;
    .img{
        border-radius: 6px;
        overflow: hidden;
        height: 224px;
    }
    .title{
        font-size: 27px;
        color: #333;
        text-align: left;
    }
    .desc{
        font-size: 14px;
        color: #9e9e9e; 
        text-align: left;
        line-height: 22px;
    }
    .look{
        display: flex;
        align-items: center;
        font-size: 11px;
        color: #aeaeae;
        img{
            width: 20px;
            height: 12px;
        }
    }
    .time{
        margin-left: 50px;
        font-size: 11px;
        color: #aeaeae;
    }
    .itemR{
        height: 100%;
        flex-direction: column;
        justify-content: space-between;
        .itemR-b{
            display: flex;
            justify-content: flex-end;
        }
    }
}
</style>
